<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>商品详情</title>
    <link rel="stylesheet" href="__CSS__/swiper-3.4.2.min.css">
    <link rel="stylesheet" href="__CSS__/mui-3.6.1.min.css">
    <link rel="stylesheet" href="__CSS__/common.css">
    <link rel="stylesheet" href="__CSS__/shop_goods_detail.css">
</head>
<body>
<div class="top-back-wrap" onclick="location.href='/Wx/Shop/shop/id/{$goodsInfo['shopId']}'">
    <div class="topbar-back-icon"></div>
</div>
<div id="topBar" class="topbar-between horizontal-view top-bar-bg">
    <div class="topbar-back"></div>
    <div class="topbar-title">商品详情</div>
    <div class="topbar-right"></div>
</div>

<div id="mSlider" class="swiper-container" style="width: 100%;box-sizing: border-box;height: 100vw;">
    <div class="swiper-wrapper" id="imgList" style="box-sizing: border-box">
        <if condition="empty($scrollImg)">
            <div class="swiper-slide">
                <img src="/{$goodsInfo.goodsImg}" />
            </div>
            <else/>
            <div class="swiper-slide">
                <img src="/{$goodsInfo.goodsImg}" />
            </div>
            <volist name="scrollImg" id="scroll">
                <div class="swiper-slide">
                    <img src="/{$scroll.goodsImg}" />
                </div>
            </volist>
        </if>
        <!-- <div class="swiper-slide" >
            <a><img class="goods-image" src="__IMG__/sp_5.png"></a>
        </div> -->

    </div>
    <div class="swiper-pagination" style="bottom: 5px;"></div>
</div>
<input id="shopPrice" type="hidden" value="{$goodsInfo.shopPrice}" />

<div class="goods-name">{$goodsInfo.goodsName}</div>
<div class="goods-sold-num">月售 {$goodsInfo.monthCount|default=0}</div>

<div class="horizontal-view goods-price-wrap">
    <div class="money-tag">￥</div>
    <div class="goods-price">{$goodsInfo.shopPrice}</div>
    <div class="goods-conversation-wrap">与TA联系</div>
</div>


<div class="horizontal-view goods-num-wrap">
    <div class="goods-num-text" style="flex-grow: inherit;">{$saleAttr[0]['attrName']}</div>
    <foreach name="saleAttr[0]['child']" item="v">
        <div data-json='{$v['json']}' onclick="changeInfo(this)" class="item">{$v['attrVal']}</div>
    </foreach>
</div>


<div class="horizontal-view goods-num-wrap" style="margin-top:0">
    <div class="goods-num-text">商品数量</div>
    <div class="goods-sub-btn" onclick="goodsSub()"></div>
    <div id="goodsNum" data-info='{$info}' max="{$goodsInfo['goodsStock']}" class="goods-num">1</div>
    <div class="goods-add-btn"  onclick="goodsAdd()"></div>
</div>

<div class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted"
     style="margin-top: 10px;">
    <div class="mui-scroll horizontal-view">
        <a class="mui-control-item mui-active" href="#goodsDetail">图文详情</a>
        <a class="mui-control-item" href="#goodsComment">商品评价</a>
    </div>
</div>
<div class="mui-slider-group">
    <div id="goodsDetail" class="mui-slider-item mui-control-content mui-active">
        <div class="mui-scroll">
            <div class="goods-detail" style="height: 500px;">{$goodsInfo.goodsDesc}</div>
        </div>
    </div>
    <input type="hidden" id="uId" value="{$Think.session.oto_userId}" />
    <input type="hidden" id="sId" value="{$goodsInfo['shopId']}" />
    <div id="goodsComment" class="mui-slider-item mui-control-content">
        <div class="mui-scroll">
            <ul class="mui-table-view goods-comment-wrap">
               <foreach name="shopComment['root']" item="v">
                <li class="hys-pflb">
                    <div class="pflb" >
                        <div class="b-nmyh">
                            <div class="nmyh">{$v['userName']}</div>
                            <div class="pjsj">{$v['createTime']}</div>
                        </div>
                        <span class="fwpf"></span><span data-score="{$v['goodsScore']}" class="setStart"></span>
                        <div class="xxsc">{$v['content']}</div>
                    </div>
                </li>
                </foreach>
            </ul>
        </div>
    </div>
</div>

<div class="horizontal-view bottom-bar">
    <div class="shop-car-wrap">
        <img id="carImg" class="shop-car-img" src="__IMG__/btn_gouwuche_nor@2x.png">
        <div id="carCount" class="shop-car-num-active <if condition="!$number">shop-car-num-none</if>">{$number|default=0}</div>
    </div>
<<<<<<< .mine
<else />
    <div class="horizontal-view bottom-bar">
        <div class="shop-car-wrap">
            <img id="carImg" class="shop-car-img" src="__IMG__/btn_gouwuche_nor@2x.png">
            <div id="carCount" class="shop-car-num-active <if condition="!$number">shop-car-num-none</if>">{$number|default=0}</div>
        </div>
        <div class="money-tag" style="align-self: center;">￥</div>
        <div id="totalMoney" class="shop-amount">{$totalMoney}</div>
        <button class="mui-btn mui-btn-yellow" onclick="<if condition="$Think.session.oto_userId">add2Car()<else/>toLogin()</if>">加入购物车</button>
    </div>
||||||| .r49
<else />
    <div class="horizontal-view bottom-bar">
        <div class="shop-car-wrap">
            <img id="carImg" class="shop-car-img" src="__IMG__/btn_gouwuche_nor@2x.png">
            <div id="carCount" class="shop-car-num-active shop-car-num-none">0</div>
        </div>
        <div class="money-tag" style="align-self: center;">￥</div>
        <div id="totalMoney" class="shop-amount">0.00</div>
        <button class="mui-btn mui-btn-yellow" onclick="<if condition="$Think.session.oto_userId">add2Car()<else/>toLogin()</if>">加入购物车</button>
    </div>
=======
    <div class="money-tag" style="align-self: center;">￥</div>
    <div id="totalMoney" class="shop-amount">{$totalMoney}</div>
    <button class="mui-btn mui-btn-yellow" onclick="<if condition="$Think.session.oto_userId">add2Car()<else/>toLogin()</if>">加入购物车</button>
</div>
>>>>>>> .r58

<script src="__JS__/mui-3.6.1.min.js"></script>
<script src="__JS__/swiper-3.4.2.min.js"></script>
<script src="__JS__/jquery2.1.1.min.js"></script>
<script src="__JS__/cart.js"></script>

<script>
    mui.init({
        swipeBack: true //启用右滑关闭功能
    });
    //localStorage.removeItem('o2oShop'+$('#uId').val());
<<<<<<< .mine
    // var init = BuyCart.initCart();
||||||| .r49
    var init = BuyCart.initCart();
=======
    //var init = BuyCart.initCart();
>>>>>>> .r58

    // $('#totalMoney').html(init['price']);
    // if(init['number']>0){
    //     $el=$('#carCount');
    //     $el.show();
    //     $el.html(init['number']);
    // }

    <if condition="$saleAttr[0]['child']">
        changeInfo($('.item').eq(0)[0]);
    </if>
    $('.setStart').each(function(i,n){
        setScoreImg(n);
    })

    /**
     * 跳转到登录
     */
    function toLogin(){
      mui.toast('请先登录');
      location.href='/Wx/Login/login';
    }


    /**
     * [description]
     * @param  {[type]} obj [description]
     */
    function changeInfo(obj){
        $('.item-active').removeClass('item-active');
        $(obj).addClass('item-active');
        //属性数据
        var item = $(obj).data('json');
        var $goodsInfo  = $('#goodsNum');
        var info = $goodsInfo.data('info');
        $goodsInfo.attr('max',item['attrStock']);
        $('.goods-price').html(item['attrPrice']);

        //商品信息
        info['goodsPri'] = item['attrPrice'];
        info['attrVal'] = item['attrVal'];
        info['id'] = item['id'];
        info['attrId'] = item['attrId'];
        console.log(info);
        $goodsInfo.data('info',info);

    }

    /**
     * 服务星级评分
     */
    function setScoreImg(obj){
      var temp = $(obj).data('score');
      var score = Math.floor(temp);
      var html='';
      for(var i=1;i<=5;i++){
          if(i<=score){
              html+='<img src="/Tpl/Wx/image/icon_star_1@2x.png" width="100%" height="100%">';
          }else if(temp*1+0.5>=i){
              html+='<img src="/Tpl/Wx/image/icon_star_05@2x.png" width="100%" height="100%">';
          }else{
              html+='<img src="/Tpl/Wx/image/icon_star_0@2x.png" width="100%" height="100%">';

          }
      }
      $(obj).html(html);
    }

    var mSwiper = new Swiper('#mSlider', {
        autoplay: 2000,
        loop: true,
        lazyLoading: true,
        lazyLoadingInPrevNext: true,
        preventLinksPropagation: true,
        pagination: '.swiper-pagination',
        autoplayDisableOnInteraction: false
    });

    $(document).ready(function () {
        $(window).scroll(function () {
            var top = $("#mSlider").offset().top; //获取指定位置
            var scrollTop = $(window).scrollTop();  //获取当前滑动位置
            //滑动到该位置时执行代码
            var offset = scrollTop - top;
            if (offset < 25) {
                $("#topBar").css("opacity", 0);
            } else if (offset < 50) {
                $("#topBar").css("opacity", 0.2);
            } else if (offset < 80) {
                $("#topBar").css("opacity", 0.4);
            } else if (offset < 120) {
                $("#topBar").css("opacity", 0.6);
            } else if (offset < 180) {
                $("#topBar").css("opacity", 0.8);
            } else {
                $("#topBar").css("opacity", 1);
            }
        });
    });

    /**
     * 商品数量加1
     */
    function goodsAdd() {
        $(".goods-sub-btn").addClass("goods-sub-btn-active");
        var num = parseInt($(".goods-num").text());
        num++;
        $(".goods-num").text(num);
    }

    /**
     * 商品数量减1
     */
    function goodsSub() {
        var num = parseInt($(".goods-num").text());
        if (num > 1) {
            num--;
            $(".goods-num").text(num);
        }
        if (num === 1) {
            $(".goods-sub-btn").removeClass("goods-sub-btn-active");
        }
    }

    /**
     * 点击加入购物车
     */
    function add2Car() {
        if(!$('#uId').val()){
            mui.toast('请先登录');
            return false;
        }



        var price = parseFloat($(".goods-price").text());
        var amount = parseFloat($(".shop-amount").text());
        var addNum = parseInt($(".goods-num").text());
        var carNum = parseInt($("#carCount").text());
        var number = carNum + addNum;


        BuyCart.addToCart1($('#goodsNum')[0],addNum);


        $("#carCount").text(number);
        if (carNum === 0) {
            $("#carImg").attr("src", "__IMG__/icon_gouwuche_light@2x.png");
            $("#carCount").removeClass("shop-car-num-none");
        }
//        var newAmount = Math.round(amount * 100 + price * 100 * addNum)/100;
        var newAmount = (( amount*100+price * 100 * addNum) / 100).toFixed(2);//保留两位小数
        $(".shop-amount").text(newAmount);

    }
</script>
</body>
</html>